import React from 'react';
import { Routes, Route, useLocation } from 'react-router-dom';
import { Layout, Menu, theme } from 'antd';
import {UnorderedListOutlined,FileTextOutlined,UserOutlined} from '@ant-design/icons';

import TodoListPage from './components/TodoListPage';
import TodoDetailPage from './components/TodoDetailPage';

const { Header, Sider, Content } = Layout;

const App: React.FC = () => {
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    const location = useLocation();

    const menuItems = [
        {
            key: '1',
            icon: <UnorderedListOutlined />,
            label: '待办事项',
            path: '/'
        },
        {
            key: '2',
            icon: <FileTextOutlined />,
            label: '已完成事项',
            path: '/completed'
        },
        {
            key: '3',
            icon: <UserOutlined />,
            label: '用户管理',
            path: '/users'
        }
    ];

    const selectedKey = menuItems.find(item => location.pathname === item.path)?.key || '1';

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider width={200} theme="dark">
                <div className="logo">Todo App</div>
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={[selectedKey]}
                    items={menuItems.map(item => ({
                        key: item.key,
                        icon: item.icon,
                        label: item.label,
                        onClick: () => window.location.href = item.path
                    }))}
                />
            </Sider>
            <Layout>
                <Header style={{ background: colorBgContainer, display: 'flex', alignItems: 'center' }}>
                    <h2 style={{ margin: 0 }}>待办事项管理系统</h2>
                </Header>
                <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
                    <div style={{ background: colorBgContainer, minHeight: 360 }}>
                        <Routes>
                            <Route path="/" element={<TodoListPage />} />
                            <Route path="/todo/:id" element={<TodoDetailPage />} />
                            <Route path="*" element={<TodoListPage />} />
                        </Routes>
                    </div>
                </Content>
            </Layout>
        </Layout>
    );
};

export default App;